const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');
const CopyPlugin = require('copy-webpack-plugin');

const pageConfig = require('./page-config');


const entry = {};
const plugins = [];
Object.keys(pageConfig).forEach(key => {
    const value = pageConfig[key];
    entry[key] = value.entry;
    plugins.push(new HtmlWebpackPlugin({
        template: value.html,
        filename: key + '/index.html',
        chunks: [key]
    }));
})

module.exports = {
    entry,
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: '[name]/index.[hash].js',
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js'
        }
    },
    module: {
        rules:[
            {
                test: /\.(png|jpe?g|gif)(\?.*)?$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 4096,
                        fallback: {
                            loader: 'file-loader',
                            options: {
                                name: 'src/images/[name].[ext]',
                                publicPath: '../',
                            }
                        },
                    }
                },
                exclude: /^http/,
            }
            , {
                test: /\.(eot|woff2|woff|ttf|svg)/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        name: '[name][hash:5].min.[ext]',
                        limit: 10000,
                        publicPath: '/src/lib/',
                        outputPath: 'lib/',
                        useRelativePath: false
                    }
                }]
            }
            , {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        cacheDirectory: true,
                        presets: ['@babel/preset-env'],
                        plugins: ['lodash'],
                    },
                }
            }
            , {
                test: /\.vue$/,
                use: 'vue-loader'
            }
            , {
                // 它会应用到普通的 `.css` 文件
                // 以及 `.vue` 文件中的 `<style>` 块
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ]
            }
            , {
                test: /\.(html)$/,
                use: {
                    loader: 'html-loader'
                }
            },
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new VueLoaderPlugin(),
        new CopyPlugin({
            'patterns':[{
                    from: __dirname + '/src/lib',
                    to: __dirname + '/dist/lib'
                }
            ]
        }),
        ...plugins
    ]
}